<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" class="demo-form-inline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvestaskcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvestaskcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvescode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvescode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvestype')">
            <el-select v-model="formInline.shelvestype">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="sku">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SupplierCode">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state">
              <el-option
                v-for="(item,index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.erpordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.erpordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button
            type="primary"
            @click="search"
            v-if="hasPermission('search')"
          >{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column
        align="center"
        prop="shelvestaskcode"
        :label="$t('m.shelves.shelvestaskcode')"
      >
        <!--   -->
        <template slot-scope="scope">
          <template v-if="hasPermission('table-shelvestaskCode')">
            <el-button
              type="text"
              @click="getShelvesTaskResult(scope.row.shelvestask)"
            >{{scope.row.shelvestaskcode}}</el-button>
          </template>
          <template v-else>{{scope.row.shelvestaskcode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="shelvescode" :label="$t('m.shelves.shelvescode')"></el-table-column>
      <el-table-column align="center" prop="qccode" :label="$t('m.tasknumber')"></el-table-column>
          <el-table-column align="center" prop="ordernumber" :label="$t('m.in.ordernumber')"></el-table-column>
          <el-table-column align="center" prop="erpordercode" :label="$t('m.in.erpordercode')"></el-table-column>
      <el-table-column align="center" :label="$t('m.shelves.shelvestype')">
        <template slot-scope="scope">{{scope.row.type|typeFilter}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.state')">
        <template slot-scope="scope">{{scope.row.state|stateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="taskleader" :label="$t('m.shelves.charge')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')">
        <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.shelves.shelvesdate')">
        <template slot-scope="scope">{{scope.row.shelvesdate|dateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <!-- table数据展示 end -->

    <!-- 根据上架任务单查询明细dialog start -->
    <shelvestaskDetailPopup
      :popupVisible="shelvestaskDetailVisible"
      :detail="popupData"
      @close="shelvestaskDetailVisible=false"
    ></shelvestaskDetailPopup>
    <!-- 根据上架任务单查询明细dialog end -->
  </div>
</template>
<script>
import shelvestaskDetailPopup from '@/components/onShelves/shelvestask-detail-popup'
let __this
export default {
  name:'shelvesTaskHistory',
  data(){
    return {
      formInline:{
        shelvestaskcode:'', //上架任务单
        shelvescode:'', // 上架单
        productspeccode:'', //sku
        suppliercode:'', //SupplierCode
        state:'', // 状态
        shelvestype:'' //上架类型
      },
      tableData:[],

      shelvesids:[], // table选中项
      shelvestaskDetailVisible:false, // 控制上架任务明细dialog显示隐藏
      popupData:{}
    }
  },
  beforeCreate(){
    __this = this
  },
  computed:{
    stateOptions(){
      return [
        { value:'', label:this.$t('m.all') },
        { value:2, label:this.$t('m.shelves.state5') },
        { value:3, label:this.$t('m.shelves.state3') }
      ]
    },
    typeOptions(){
      return [
        { value:'', label:this.$t('m.all') },
        { value:1, label:this.$t('m.shelves.type1') },
        { value:2, label:this.$t('m.shelves.type2') },
        { value:3, label:this.$t('m.shelves.type3') },
        { value:4, label:this.$t('m.in.other') }
      ]
    }
  },
  mounted(){
    this.getData()
  },
  components:{ shelvestaskDetailPopup },
  filters:{
    stateFilter(val){
      let { label = '' } = __this.stateOptions.find(item => {
        if (item.value === val) return item
      })
      return label
    },
    typeFilter(val){
      let { label = '' } = __this.typeOptions.find(item => {
        if (item.value === val) return item
      })
      return label
    }
  },
  methods:{
    getData(){
      let options = {
        method:'get',
        url:`/shelvestask/historylist`,
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        this.tableData = this.tableData.map(item => {
          if (!item.shelvesdate) item.shelvesdate = '---'
          return item
        })
        if (!data.records.length) return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 根据id获取上架任务明细信息
    getshelvestask(shelvestask, popup){
      let options = {
        method:'get',
        url:`/shelvestask/query/${shelvestask}`
      }
      this.$axios(options).then(({ data }) => {
        this.popupData = data
        this[`${popup}Visible`] = true
      })
    },
    search(){
      this.page = 1
      this.getData()
    },
    getShelvesTaskResult(id){
      this.getshelvestask(id, 'shelvestaskDetail')
    }
  },
  beforeRouteLeave(to, form, next){
    this.shelvestaskDetailVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>